<extend name="Common:base"/>
<block name="head">
  <style>
    .el-tabs__header{
      border-top:2px solid #ea4b4b;
      border-bottom: 1px solid #c51f1f;
    }
    .el-dialog .el-tabs__header{
      border-top:none;
    }
    .el-tabs--border-card .el-tabs__item{
      border-left: none;
    }
    .el-tabs--border-card .el-tabs__item.is-active {
      background-color: #fff;
      border-right-color: #d3dce6;
      background: #544b8f;
      color: #fff;
    }
    .el-tabs--border-card .el-tabs__header {
      background-color: #fff;
      margin: 0;
    }
    .container > .wrapp > .a > .el-row {
      margin-bottom: 6px;
    }
    .el-tabs--border-card .el-tabs__content{
      padding:0 9px 5px 9px;
    }
    .el-card, .el-menu--horizontal .el-submenu>.el-menu, .el-tabs--border-card{
      box-shadow: none;
    }
    .el-tabs--border-card{
      border: none;
    }
    .el-tabs__item{
    	font-family: Microsoft YaHei;
    	color:#0d0f10;
    	font-size: 14px;
    }
    .el-dialog__body{
      color: rgb(72, 87, 106);
      font-size: 14px;
      /*padding: 30px 20px;*/
      padding: 30px 20px 6px 20px;
    }
  </style>
</block>
<block name="body">
	<div id="app" class="container">
		<div class="wrapp" v-show="show" style="display:none;">
			<div class="a">
				<el-row>
        	<el-col :span="24">
          	<el-form :inline="true" ref="searchForm" :model="searchForm">
          		<el-form-item v-show="departName=='总部'">
	              <el-select size="small" style="width:150px;" v-model="searchForm.belongs_department" clearable filterable allow-create placeholder="所属部门">
                  <el-option v-for="department in belongsDepartment" :label="department.name" :value="department.name"></el-option>
	              </el-select>
			  		  </el-form-item>
			  		  
			  		  <el-form-item>
	              <el-select size="small" style="width:150px;" v-model="searchForm.expense_type" placeholder="费用类型">
                  <el-option v-for="(value,key) in expense_type" :label="value" :value="key"></el-option>
	              </el-select>
			  		  </el-form-item>
			  		  
			  		  <el-form-item prop="cashier" style="width:150px">
			  		    <el-input v-model="searchForm.cashier" size="small" placeholder="经报人"></el-input>
			  		  </el-form-item>
			  		  
			  		  <el-form-item >
                <el-date-picker size="small" v-model="searchForm.re_time" 
                  placeholder="选择报销日期" 
                  @change="DateChange">
                </el-date-picker>
              </el-form-item>

	            <el-form-item>
	              <el-tooltip content="填写或者选择好筛选条件后点击此按钮" placement="bottom-start">
	                <el-button type="info" size="small" icon="search" @click="loadDatalist">查询</el-button>
	              </el-tooltip> 
	            </el-form-item>
             
              <el-form-item>
	              <el-tooltip content="清空搜索框并刷新表格数据" placement="bottom-start">
	                <el-button size="small" @click="resetBack">重置</el-button>
	              </el-tooltip>
              </el-form-item>

	            <el-form-item>
	              <el-tooltip content="点击刷新当前页面" placement="right">
	                <el-button @click="refresh" size="small" type="danger">刷新</el-button>
	              </el-tooltip>
	            </el-form-item>

            </el-form>
          </el-col>
			  </el-row>

			  <el-row>
        	<el-col :span="24">
	          <el-table v-loading="dataLoad" :data="dataList"
                @selection-change="handleChange"
	              element-loading-text="{:L('DATA_LOGIN')}"
	              empty-text="暂无数据！"
	              highlight-current-row ref="select" border>
              <el-table-column type="selection" width="55"></el-table-column>

			  	    <el-table-column label="{:L('INDEX')}" type="index" width="65" >
			  	    </el-table-column>

	            <el-table-column  align="center" prop="belongs_department" label="使用单位">
	            </el-table-column>

			  	    <el-table-column  align="center" prop="expense_type" label="费用类型">
			  	    	<template scope="scope">
				          {{ getType(scope.row.expense_type, 'expense_type') }}
				        </template>
			  	    </el-table-column>

              <el-table-column  align="center" prop="cashier" label="经报人">
              </el-table-column>

              <el-table-column  align="center" prop="advance_payment" label="预支费用">
              </el-table-column>
              
              <el-table-column  align="center" prop="reimbursement" label="报销金额">
              </el-table-column>
              
              <el-table-column  align="center" prop="reason" label="报销事由">
              </el-table-column>
              
              <el-table-column  align="center" prop="re_time" label="报销时间">
              </el-table-column>
              
              <el-table-column  align="center" prop="remark" label="备注">
              	<template scope="scope">
                	{{ scope.row.remark | handleString(4) }}
              	</template>
              </el-table-column>
	          </el-table>
          </el-col>
			  </el-row>

			  <el-row>
			  	<el-col :span="12">
			      <div class="grid-content bg-purple">
              <span class="wrapper">
                <el-tooltip content="至少选择一条信息再点击删除" placement="bottom-start">
                  <el-button size="small" @click="handleDeletes" type="danger">删除</el-button>
                </el-tooltip>
                <el-tooltip content="点击新增一个费用明细" placement="right">
                  <el-button size="small" @click="openDialog('add')" type="primary">新增</el-button>
                </el-tooltip>
              </span>
			      </div>
			    </el-col>
			  	<el-col :span="12" >
			      <div class="grid-content bg-purple-light pull-right">
			        <!-- page -->
			        <include file="Common:_pagination" />
			        <!-- / page -->
			      </div>
			    </el-col>
			  </el-row>
			  
			  <!--<el-row>
          <el-col :span="24">
            <div id="echarts" style="height:400px;width:1000px;margin-top:20px;">
              
            </div>
          </el-col>
        </el-row>-->
			</div>
			<div class="dialogWrapper" v-show="show" style="display: none">
			  <!-- 新增 -->
			  <include file="_add" />
			  <include file="_infoContents" />
		    <!-- / 新增 -->
			</div>
		</div>
	</div>
</block>
<block name="scripts">
<script src="__PUBLIC__/js/echarts.min.js"></script>
<script>
	window.defaultOption.setVueHook('mounted',function(){
    var vmThis = this;
    var edom = document.getElementById('echarts');
    var myChart = echarts.init(document.getElementById('echarts'));
    var colors = ['#5793f3', '#27727B', '#675bba','#C1232B','#B5C334','#FCCE10','#E87C25','#27727B'];

    var option = {
        color: colors,
        title: {
          text: '最近一月统计情况',
          x:'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            dataView: {show: true, readOnly: false},
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        // legend: {
        //   data:['采购费用','出差费用','活动费用','保修费用','其他费用'],
        //   align: 'right',
        //   right: 10,
        // },
        xAxis: {
          expense_type: 'expense_type',
          axisTick: {
              alignWithLabel: true
          },
          data: ['采购费用','出差费用','活动费用','保修费用','其他费用'],
        },
        yAxis: [{
                type: 'value',
                name: '金额(元)',
                axisLine: {
                    lineStyle: {
                        color: colors[3]
                    }
                },
                axisLabel: {
                    formatter: '{value} 元'
                }
            }
        ],
        series: [
          {
              name:'报销费用',
              type:'bar',
              barWidth: '20%',
              data:[8888, 2222, 3333, 4444, 1111],
              itemStyle:{
                normal:{
                  color:function (params){
                    //console.log(params);
                    var colorList = ['#20A1FF','#E75252','#FFD720','#E51EFD','#3FDFE3'];
                    return colorList[params.dataIndex];
                  }

                }
              }
          }
        ]
    };
    
    myChart.setOption(option);
    window.onresize = myChart.resize;
    
    

  }).setDatas({
		multipleSelection: [],
		dialogLabelWidth:"120px",
    dataList:[],
    infoDialog:false,
    infoData:{},
    expense_type:{:json_encode($expense_type)},
    belongsDepartment:{:json_encode($belongsDepartment)},
    departName:{:json_encode($departName)},
    attributes:{:json_encode($attributes)},
    addRules:{
			expense_type:[
      	{required: true, message: '请选择费用类型'},
			],
			department:[
      	{required: true, message: '请选择使用单位'},
			],
			reason:[
			{pattern:/^([^\s]){1,42}$/,message:'不超过42个汉字！不能使用空格',required: true},
			],
			advance_payment:[
      	{required: true, message: '请填写预支费用,样式为数字值', trigger: 'blur',type:'number'},
      	{ pattern:/^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/,  message: '格式为888或888.00'},
			],
			reimbursement:[
      	{required: true, message: '请填写报销金额,样式为数字值', trigger: 'blur',type:'number'},
      	{ pattern:/^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/,  message: '格式为888或888.00'},
			],
			re_time:[
      	{required: true, message: '请填写报销日期',trigger: 'change'},
			],
			cashier:[
      	{required: true, message: '请填写经报人', trigger: 'blur'},
			]
		},
	}).setForm('add',{
    expense_type:"",
    advance_payment:"",
    reimbursement:"",
    reason:"",
    cashier:"",
    re_time:"",
    remark:"",
    belongs_department:"",
    info_status:"1",
  },true).setForm('search',{
		expense_type:"",
    cashier:'',
    belongs_department:{:json_encode($departName)},
    re_time:'',
	}).setMethod('resetBack',function(){
    window.location.href="{:U('index')}";
  }).setMethod('getType', function(type, field){
 		return this[field][type];
  }).setMethod('DateChange', function(v){
    this.searchForm.re_time = v;
  }).setMethod('ReTime', function(v){
    this.addForm.re_time = v;
  }).setMethod('handleChange', function(val){
	  this.multipleSelection = val; //点击勾选用这个
		//点击选中用这个 开始
		/*this.deleteArrAllItem('multipleSelection');
		this.multipleSelection.push(val) ;*/
		//点击选中用这个 结束
	    
	}).setMethod("handleDeletes", function(url){
	  if(this.multipleSelection.length <= 0){
		  this.$message.error('请先选择信息');
		  return false;
	  }else{
		  if (!arguments[2]) {
			  url= this.page.deleteUrl;
		  }
		  var selectedIds = new Array();
		  for(var i=0; i<this.multipleSelection.length; i++){
			  selectedIds[i] = this.multipleSelection[i].id;
		  }
		  var vmThis = this;
		  this.$confirm('确定删除?', '提示', {
			  confirmButtonText: '确定',
			  cancelButtonText: '取消',
			  type: 'warning'
		  }).then(function(){
			  vmThis.$http.post(url, {ids:selectedIds}).then(function(response){
				  vmThis.$message({
					  type: 'success',
					  message: '删除成功!'
				  });
				  vmThis.loadDatalist();
			  }, function(response){
				  vmThis.$message({
					  type: 'error',
					  message: '删除失败'
				  });
			  })
		  }).catch(function() {
			  vmThis.$message({
				  type: 'info',
				  message: '已取消操作'
			  });
		  });
	  }

  });
</script>
</block>